<!DOCTYPE html>
<html lang="en">

<head>
    <title>丰收保险经纪网</title>   	
   <meta name="keywords" content="丰收，保险经纪，保险经纪网，丰收经纪保险，丰收经纪网，保险超市  " />
	<meta name="description" content="丰收保险经纪网是康达尔设立的保险电子商务网站，提供国内外80余家保险公司的保险产品，通过丰收保险经纪可在线比价，方便快捷的进行保险购买。丰收保险经纪为客户免费提供专业、优质的协助理赔服务，为投保人争取最大利益。丰收保险经纪涵盖保险及产品在线购买，保险产品优惠，保险推荐，保险预约，积分兑换礼品，报案理赔等内容 ，就上丰收保险经纪！"/>  
<link rel="shortcut icon" href="/templets/1/fengshou//m/images/logo.ico" type="x-icon">  
   <meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
		<meta name="x5-orientation" content="portrait">
		<meta name="x5-fullscreen" content="true">
		<meta name="x5-page-mode" content="app">
		<link rel="stylesheet" href="/templets/1/fengshou//m/css/base.css">
		<link rel="stylesheet" href="/templets/1/fengshou//m/css/main.css">
		 <link rel="stylesheet" href="/templets/1/fengshou//m/mint/lib/style.css">
		  <script src="/templets/1/fengshou//m/js/zepto.min.js"></script>
    	<script src="/templets/1/fengshou//m/js/vue.min.js"></script>
    	<script src="/templets/1/fengshou//m/mint/lib/index.js"></script> 
</head>

<body class="white">
    <div id="appCtrl" v-locak>
        <mt-header title="${ins.title?default('丰收经纪保险')}">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        
        
        <div class="product-banner">
            <img src="/${ins.smallImage?default('')}" alt="">
        </div>

        <div class="prodcut-title">
         	${ins.title?default('丰收经纪保险')}
        </div>

        <div class="product-info">
            <div class="choose-attrs">
                <dl class="clearfix">
                    <dt>保　　额：</dt>
                    <dd>
                        <a 
                        href="javascript:;" 
                        v-for="(el,index) in product"
                        :key="index"
                        @click="amountIndex=index" 
                        :class="{on:amountIndex === index}">
                            {{el.amount/10000}} 万
                        </a>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>保障期限：</dt>
                    <dd>一年</dd>
                </dl>
                <dl class="clearfix">
                    <dt>年　　龄：</dt>
                    <dd>
                        <a 
                        v-for="(el,index) in product[amountIndex].age"
                        :key="index"
                        @click="ageIndex=index"
                        href="javascript:;"
                        :class="{on:ageIndex === index}">
                        {{el.scope}}</a>
                    </dd>
                </dl>
            </div>
        </div>

        <mt-tab class="product-tab" v-model="typeId" @click="linkTo">
            <mt-tab-item :id="1001">产品详情</mt-tab-item>
            <mt-tab-item :id="1002">购买须知</mt-tab-item>
            <mt-tab-item :id="1003">常见问题</mt-tab-item>
        </mt-tab>




        <div class="product-article">
            <div class="content" v-show="typeId==1001">
                 ${ins.content?default('')}
            </div>
          	<div v-show="typeId==1002">
					 ${ins.notice?default('')}
			</div>	
			<div v-show="typeId==1003">
				 ${ins.helptext?default('')}
			</div>	
        </div>

    <div class="fixed-buy">
        <a href="" class="service"></a>
        <p>价格：￥{{product[amountIndex].age[ageIndex].price}}</p>
        <div class="submit">立即购买</div>
    </div>
    </div>
   
    <script>
        var vmodel = new Vue({
            el: '#appCtrl',
            data: function(){
                return {
                    typeId:1001,
                    amountIndex:0,
                    ageIndex:0,
                    product:[{
                        id:1000001,
                        amount:20000,
                        age:[{
                            scope: '45-49',
                            price: 400
                        },{
                            scope: '50-54',
                            price: 500
                        },{
                            scope: '55-59',
                            price: 600
                        }]
                    },{
                        id:1000002,
                        amount:10000,
                        age:[{
                            scope: '45-49',
                            price: 301
                        },{
                            scope: '50-54',
                            price: 401
                        },{
                            scope: '55-59',
                            price: 501
                        },{
                            scope: '60-64',
                            price: 601
                        }]
                    }]
                }
            },

            watch:{
                amountIndex: function(val){
                    var size = this.product[val].age.length-1;
                    if(this.ageIndex>size){
                        this.ageIndex = size;
                    }
                }
            },

            methods:{
                submit: function(){
                    var amount = vmodel.product[vmodel.amountIndex].amount;

                    var scope = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].scope;

                    var id = vmodel.product[vmodel.amountIndex].id;

                    var price = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].price;

                    location.href = 'http://www.baidu.com?amount='+ amount +'&scope='+scope+'&price='+price+'&id='+id;
                },

                linkTo: function(){

                }
            },
            mounted: function(){
                var img = document.querySelectorAll('img');
                img.forEach(function(el, index){
                   el.style.width = el.width = '100%';
                   el.style.height = el.height = 'auto';
                })
           }
      
        })

    </script>
</body>

</html>